<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背个X啊</title>
<style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0 auto;
        max-width: 600px;
    }
    .input-area {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .input-area > div {
        flex: 1;
    }
    textarea {
        width: 50em;
        height: 10em;
        padding: 10px;
        box-sizing: border-box;
    }
	input {
		width: 3em;
	}
    .controls {
        display: flex;
        flex-direction: column;
    }
    .controls > input {
        margin-bottom: 10px;
    }
    #output {
		width: 70em;
        margin-top: 20px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="input-area">
        <div>
            <textarea id="originalText" placeholder="输入原文"></textarea>
        </div>
        <div class="controls">
            忽略字符：<textarea id="ignoreChars" placeholder="不替换字符"> ,.;:/?<>"'|[]{}_-+=~`!@#$%^&*()\r\n　！￥%……&*（）——+{}【】|、：；“”‘’《，》。？、</textarea>
			每隔<input type="number" id="interval" placeholder="间隔字数" size="3" value="1"/>字
            将<input type="number" id="replaceCount" placeholder="替换字数" size="3" value="3"/>字
            替换为<input type="text" id="replacementChar" placeholder="替换字符" size="3" value="＿"/>
			<input type="checkbox" id="underLine" placeholder="加下划线" value="true"/>加下划线
            起始替换<input type="number" id="startReplace" placeholder="起始替换字数" size="3" value="0"/>字
            <button onclick="replaceText()">转换</button>
        </div>
    </div>
	<div id="description"></div>
    <textarea id="output" placeholder="背诵提示稿" readonly></textarea>
</div>

<script>
function replaceText() {
    const originalText = document.getElementById('originalText').value;
    const ignoreChars = document.getElementById('ignoreChars').value;
    const interval = parseInt(document.getElementById('interval').value, 10) || 1;
    const replaceCount = parseInt(document.getElementById('replaceCount').value, 10) || 1;
    const replacementChar = document.getElementById('replacementChar').value || '＿';
	const startReplace = parseInt(document.getElementById('startReplace').value, 10) || 0;

    document.getElementById('description').innerHTML = "隔" + interval + "空" + replaceCount + "初始" + startReplace;

    let outputText = '';
    let ignoreCharsSet = new Set(ignoreChars.split(''));
    let position = 0;

	let skipped = 0;
	let replaced = 0;
	let startReplaced = 0;
	for (i in originalText) {
		let c = originalText[i];

		if (ignoreCharsSet.has(c)) {
			outputText += c;
			continue;
		}
		
		if (startReplaced++ < startReplace) {
			outputText += replacementChar;
			continue;
		}
	
		if (skipped < interval) {
			outputText += c;
			skipped++;
			if (skipped >= interval) {
				replaced = 0;
			}
			continue;
		}
		if (replaced < replaceCount) {
			outputText += replacementChar;
			replaced++;
			if (replaced >= replaceCount) {
				skipped = 0;
			}
		}
		
	}
	

//    while (position < originalText.length) {
//        let shouldSkip = false;
//        for (let i = 0; i < replaceCount; i++) {
//            if (position + i < originalText.length && ignoreCharsSet.has(originalText[position + i])) {
//                shouldSkip = true;
//                break;
//            }
//        }
//        if (shouldSkip) {
//            outputText += originalText.substring(position, position + replaceCount);
//            position += replaceCount;
//        } else {
//            outputText += replacementChar.repeat(replaceCount);
//            position += interval;
//        }
//    }

    document.getElementById('output').value = outputText;
}
</script>
</body>
</html>

